<template>
    <p>
        <el-button type="primary" @click="state.showAdd=!state.showAdd">增加</el-button>
    </p>
    <el-table :data="state.tableData" style="width:90%">
        <el-table-column type="selection" width="50"></el-table-column>
        <el-table-column prop="sno" label="学号" width="100"></el-table-column>
        <el-table-column prop="name" label="姓名" width="100"></el-table-column>
        <el-table-column prop="gender" label="性别" width="100"></el-table-column>
        <el-table-column prop="email" label="邮箱" width="150"></el-table-column>
        <el-table-column prop="telephone" label="电话" width="130"></el-table-column>
        <el-table-column width="150" label="操作">
            <template #default="scope">
                <el-button type="danger" size="small" @click="del(scope.row.id)" circle icon="delete"></el-button>
                <el-button type="primary" size="small" circle icon="edit"></el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination background style="margin-top:30px;" :total="state.total"
    :current-page="state.page" :page-size="state.limit"
    @current-change="jump"  layout="total,prev,pager,next,jumper">

    </el-pagination>

    <el-dialog v-model="state.showAdd" title="增加学生"
               style="height: 400px" width="40%">
        <el-form label-width="auto">
            <el-form-item label="学号">
                <el-input v-model="addForm.sno" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="学生姓名">
                <el-input v-model="addForm.name" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="性别">
                <el-radio-group v-model="addForm.gender">
                    <el-radio value="男">男</el-radio>
                    <el-radio value="女">女</el-radio>
                </el-radio-group>
            </el-form-item>
            <el-form-item label="邮箱">
                <el-input v-model="addForm.email" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item label="电话">
                <el-input v-model="addForm.telephone" style="width:200px"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button @click="add" type="primary">确认</el-button>
            </el-form-item>
        </el-form>

    </el-dialog>
</template>

<script setup>
import { onMounted, reactive, getCurrentInstance } from 'vue'
import axios from '@/utils/axios'
import { ElMessage } from 'element-plus'
import { Plus, Delete } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

//定义响应式变量
const state = reactive({
    tableData:[],
    page:1,
    limit:5,
    total:0,
    showAdd:false,
})
const addForm = reactive({
    sno:2000+parseInt(Math.random()*1000),
    name:'张三1',
    gender:'男',
    email:'234234@qq.com',
    telephone:'1812349103'
})

//钩子函数->初始化数据
onMounted(()=>{
    init();
})
const init = () => { //定义一个方法
    axios.post("/api/stu", {
            page:state.page, //页码
            limit:state.limit //每页的数量
    }).then(res=>{ //服务器响应后执行的回调函数
            console.log("goods:", res);
            state.tableData = res.data;
            state.total = res.count;
        })
}
const jump = (val) => {
    state.page = val; //页码
    init();
}

const add = () => {
    axios.post("/api/stu?op=add", addForm)
        .then(res => {
            if(res.code == 200){
                ElMessage("增加成功!");
                location.reload();
            }
            else{
                ElMessage("增加失败！未知错误！");
            }
        })
}

const del = (id) => {
    axios.post("/api/stu?op=del&id="+id)
        .then(res => {
            if(res.code == 200){
                ElMessage("删除成功!");
                location.reload();
            }
            else{
                ElMessage("删除失败！未知错误！");
            }
        })
}
</script>

<style scoped>
  .good-container {
    min-height: 100%;
  }
  .el-card.is-always-shadow {
    min-height: 100%!important;
  }
</style>
